Lazy Loading এবং Caching

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর Performance Optimization Techniques |

Lazy Loading এবং Caching হল দুটি প্রযুক্তি যেগুলি ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের কর্মক্ষমতা এবং লোড টাইম উন্নত করার জন্য ব্যবহৃত হয়। এগুলি মূলত ইউজার এক্সপেরিয়েন্স (UX) এবং সার্ভার রিসোর্স ব্যবহারের অপ্টিমাইজেশন জন্য গুরুত্বপূর্ণ।

Lazy Loading

Lazy Loading হল এমন একটি কৌশল যেখানে পেজের সম্পূর্ণ কন্টেন্ট একযোগে লোড করা হয় না। পরিবর্তে, যখন ব্যবহারকারী একটি নির্দিষ্ট অংশে স্ক্রল করেন বা কোনো নির্দিষ্ট ইন্টার‍্যাকশন করেন, তখন সেগুলোর কন্টেন্ট বা রিসোর্স লোড হয়। এই কৌশলটি সাধারণত ইমেজ, ভিডিও, স্ক্রিপ্ট বা অন্য কোনও রিসোর্সের জন্য ব্যবহৃত হয়, যাতে পেজটি দ্রুত লোড হয় এবং শুধুমাত্র প্রয়োজনীয় অংশগুলি লোড হয়।

কেন Lazy Loading প্রয়োজন?

এটি পেজ লোডের সময় কমিয়ে আনে, কারণ সাইটের সমস্ত কন্টেন্ট একযোগে লোড না হয়ে শুধু ভিউ পোর্টে আসা কন্টেন্ট লোড হয়।
এটি ব্যান্ডউইথ অপ্টিমাইজেশন করে, কারণ অনেক ফাইল ব্যবহারকারী ভিজিট না করলেও লোড হয় না।
এতে পেজের পারফরম্যান্স উন্নত হয়, বিশেষ করে বড় পেজ বা মিডিয়া ফাইলের ক্ষেত্রে।

Lazy Loading উদাহরণ (ইমেজের জন্য)

<img src="placeholder.jpg" data-src="high-resolution-image.jpg" class="lazyload" alt="Image description">

এখানে, data-src অ্যাট্রিবিউটটি মূল ইমেজের URL ধারণ করে, কিন্তু src অ্যাট্রিবিউটটি শুধুমাত্র প্লেসহোল্ডার (লো-রেজোলিউশন) ইমেজ ধারণ করে। যখন ব্যবহারকারী স্ক্রল করে এবং ইমেজটি ভিউপোর্টে আসে, তখন JavaScript Lazy Loading ইমেজটি লোড করবে।

JavaScript লাইব্রেরি উদাহরণ: বুটস্ট্র্যাপ ৫ বা অন্য লাইব্রেরির সাথে LazyLoad.js বা Intersection Observer API ব্যবহার করে Lazy Loading কার্যকর করা যায়।

// Example using Intersection Observer API
const lazyImages = document.querySelectorAll('img.lazyload');
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.getAttribute('data-src');
      image.classList.remove('lazyload');
      observer.unobserve(image);
    }
  });
}, { threshold: 0.1 });

lazyImages.forEach(image => {
  imageObserver.observe(image);
});

Caching

Caching একটি কৌশল যা ডেটা বা রিসোর্সগুলির একটি কপি সরবরাহকারী স্থানে সংরক্ষণ করে, যাতে পরবর্তী সময়ে যখন সেগুলির পুনরায় প্রয়োজন হয়, তখন এগুলোর দ্রুত অ্যাক্সেস সম্ভব হয়। ওয়েব অ্যাপ্লিকেশনে caching মূলত সার্ভার, ব্রাউজার বা CDN (Content Delivery Network)-এ ব্যবহৃত হয়।

কেন Caching প্রয়োজন?

পারফরম্যান্স: ক্যাশিং ডেটা পুনরায় সংগ্রহ বা প্রক্রিয়া করার প্রয়োজনীয়তা কমিয়ে দেয়, ফলে সাইটের লোড টাইম কমে এবং ওয়েবসাইট দ্রুত প্রতিক্রিয়া জানায়।
ব্যান্ডউইথ সাশ্রয়: ক্যাশ করা কনটেন্ট পুনরায় লোড করার প্রয়োজন পড়ে না, যার ফলে ব্যান্ডউইথ কম ব্যবহৃত হয়।
রিসোর্স সাশ্রয়: ক্যাশিংয়ের মাধ্যমে সার্ভারের ওপর লোড কমানো যায়।

Caching উদাহরণ

HTTP Caching (Cache-Control Header): ক্যাশিং হেডার ব্যবহার করে ব্রাউজার বা সার্ভারে রিসোর্সগুলো সংরক্ষণ করা যায়।
```
Cache-Control: public, max-age=86400
```
এখানে, max-age=86400 নির্দেশ করে যে রিসোর্সটি ২৪ ঘণ্টা (৮৬৪০০ সেকেন্ড) ক্যাশে থাকবে।
Service Workers (Advanced Caching for Progressive Web Apps): Service Workers হল JavaScript কোড যা ব্রাউজারের ব্যাকগ্রাউন্ডে চলতে থাকে এবং পেজ লোডের সময় রিসোর্স ক্যাশ করতে সাহায্য করে। এটি অফলাইন মোডেও কাজ করতে সক্ষম।
```
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      return cachedResponse || fetch(event.request);
    })
  );
});
```
এখানে, caches.open ক্যাশে ফাইলগুলো সংরক্ষণ করবে এবং caches.match সেগুলো থেকে রিসোর্স লোড করবে।
Browser Caching: ব্রাউজার ক্যাশিং সাধারণত HTML, CSS, JavaScript, ইমেজ এবং অন্য স্ট্যাটিক ফাইলের জন্য ব্যবহৃত হয়।
```
<meta http-equiv="cache-control" content="public, max-age=3600">
```
এই কোডটি ব্রাউজারকে বলে দেয় যে রিসোর্সটি ১ ঘণ্টার জন্য ক্যাশে থাকতে পারে।